<template>
    <div class="browse-product">
        <div class="img">
            <img :src="product.imageUrl120" alt="">
        </div>
        <div class="info">
            <div class="title-wrap">
                <div class="title">{{product.itemName}}</div>
            </div>
            <div class="btm">
                <div class="price">￥{{product.price}}</div>
                <van-button type="primary" round size="small" @click="shareDataRender">
                    <img src="../static/images/icon-share.png" class="icon-share" alt="">分享
                </van-button>
            </div>
        </div>
    </div>
</template>

<script>
  import {getProductQRCode} from "@/api";

  export default {
    name: "browse-product",
    props: ['product'],
    methods: {
      shareDataRender() {
        this.$emit('share', this.product);
      }
    }
  }
</script>

<style scoped lang="less">
    .browse-product {
        border-bottom: 1px solid rgba(226, 226, 226, 1);
        padding: 32px 36px 32px 0;
        display: flex;

        .img {
            img {
                width: 208px;
                height: 208px;
            }

            margin-right: 24px;
            display: inline-flex;
        }

        .info {
            width: 100%;
            display: flex;
            flex-direction: column;
            padding-top: 18px;
            justify-content: space-between;
        }

        .title {
            width: 450px;
            height: 45px;
            font-size: 32px;
            font-weight: bold;
            color: rgba(0, 0, 0, 1);
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }

        .price {
            font-size: 32px;
            font-weight: bold;
            color: rgba(255, 64, 64, 1);
        }

        .btm {
            font-size: 28px;
            font-weight: 400;
            color: rgba(150, 156, 161, 1);
            display: flex;
            width: 100%;
            justify-content: space-between;

            /deep/ .van-button {
                height: 55px;
                line-height: 52px;
                padding: 0 20px;
            }
        }
    }

    .icon-share {
        width: 31px;
        height: 28px;
        margin-right: 8px;
        transform: translateY(5px);
    }
</style>
